<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="shortcut icon" href="favicon.ico">
    <title>写个抽奖机玩玩(暂不兼容移动端）</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            background-color: black;
        }

        #app {
            height: 100%;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;

        }

        .center-container {
            position: relative;
            width: 40rem;
            height: 30rem;
            background-color: rgba(193, 248, 255, 0.11);
            border: 1px solid rgba(131, 255, 236, 0.692);
            border-radius: 4px;
        }

        .center-container .title {
            width: 100%;
            text-align: center;
            position: absolute;
            top: -4rem;
            color: rgba(198, 255, 246, 0.932);
            font-size: 1.6rem;
            font-weight: 600;
        }

        .center-container .btn-list {
            width: 4rem;
            display: flex;
            align-items: center;
            flex-direction: column;
            position: absolute;
            top: 0;

        }

        .btn-list.left {
            left: -4rem;
        }

        .btn-list.right {
            right: -4rem;
        }

        .btn-list .btn {
            margin: 0 0 1rem;
            opacity: 0.8;
            color: rgb(218, 249, 255);
            background-color: rgb(255, 255, 255, .2);
        }

        .content {
            width: 100%;
            height: 100%;
        }

        .content .top {
            padding: 2rem 0 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .history {
            height: 21rem;
            margin: 0 1.6rem;
            overflow: auto
        }

        .history .titlespan {
            color: rgb(209, 246, 255);
        }

        .el-divider__text {
            color: rgb(209, 246, 255);
            background-color: rgba(21, 27, 28);
            ;
        }
        .bg_music{
            opacity: .4;
            position: fixed;
            bottom: 0;
            left: 0;
            z-index: 10;
        }
    </style>
     
</head>

<body>
    <div class="bg_music">
        <audio src="music/luckycoming.mp3" loop="loop" controls="controls" autoplay="autoplay"> </audio>
    </div>
    <!-- <canvas height="100%" width="100%" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 1;"  id="canvas"></canvas> -->
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F4%2F54757f38e29fc.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611373812&t=a1fd6cf98ec7959ca1b1986380e4a15d" style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;" alt="">
    <div id="app">

        <div class="center-container">
            <div class="title">欢迎来到夏吉尔节日系统</div>
            <div class="left btn-list">
                <el-tooltip content="点击查看奖规则" placement="left" effect="dark" class="btn">
                    <el-button icon="el-icon-notebook-2" class="btn" circle @click="show(1)"></el-button>
                </el-tooltip>
                <el-tooltip content="奖品池" placement="left" effect="dark" class="btn">
                    <el-button icon="el-icon-present" circle @click="show(2)"></el-button>
                </el-tooltip>
            </div>
            <div class="right btn-list">
                <el-tooltip content="中奖记录" placement="right" effect="dark" class="btn">
                    <el-button icon="el-icon-search" class="btn" circle @click="show(3)"></el-button>
                </el-tooltip>
                <el-tooltip content="开奖公示" placement="right" effect="dark" class="btn">
                    <el-button icon="el-icon-trophy" circle  @click="show(4)"></el-button>
                </el-tooltip>
                <el-tooltip content="你不知道" placement="right" effect="dark" class="btn">
                    <el-button icon="el-icon-s-opportunity" circle  @click="show(5)"></el-button>
                </el-tooltip>
            </div>
            <div class="content">
                <div class="top">
                    <el-button size="medium" type="primary" @click="getPresent">开始抽奖</el-button>
                </div>
                <el-divider> 中奖记录 </el-divider>

                <div class="history">
                    <el-table :data="getAwardData">
                        <el-table-column property="p_index" label="序号" width="50"></el-table-column>
                        <el-table-column property="id" label="ID" width="50"></el-table-column>
                        <el-table-column property="name" label="奖品" ></el-table-column>
                        <el-table-column property="date" label="时间" ></el-table-column>
                        <el-table-column property="type" label="类型" width="50"></el-table-column>
                        <el-table-column property="level" label="等级" width="50"></el-table-column>
                    </el-table>

                </div>


            </div>
        </div>


        <el-dialog title="抽奖规则" :visible="showrule" width="30%" :before-close="handleClose">
            <p>首先是，还没写完，数据都是随便写的</p>
            <span>{{ruleTXT}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="showrule = false">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="奖品池" :visible="showaward" width="60%" :before-close="handleClose">
            <el-table :data="awardData">
               
                <el-table-column property="name" label="奖品" width="200"></el-table-column>
                <el-table-column property="type" label="类型" width="50"></el-table-column>
                <el-table-column property="level" label="等级" width="50"></el-table-column>
                <el-table-column property="use" label="消耗或发动条件" width="200"></el-table-column>
                <el-table-column property="area" label="作用对象" width="100"></el-table-column>
                <el-table-column property="desc" label="效果"></el-table-column>
                <el-table-column property="other" label="其他"></el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="showaward = false">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="中奖记录" :visible="showhistory" width="60%" :before-close="handleClose">
            <el-table :data="getAwardData">
                <el-table-column property="id" label="编号" width="50"></el-table-column>
                <el-table-column property="name" label="奖品" width="100"></el-table-column>
                <el-table-column property="type" label="类型" width="50"></el-table-column>
                <el-table-column property="level" label="等级" width="50"></el-table-column>
                <el-table-column property="use" label="消耗或发动条件" width="120"></el-table-column>
                <el-table-column property="area" label="作用对象" width="80"></el-table-column>
                <el-table-column property="desc" label="效果"></el-table-column>
                <el-table-column property="other" label="其他"></el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="showhistory = false">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="往期开奖公示" :visible="showTotal" width="60%" :before-close="handleClose">
            <div class="" v-for="item in totalHistory" :key="item.date">
                <div>{{item.date}}</div>
                <div>{{item.dateName}}</div>
                <el-table :data="item.awardData">
                    <el-table-column property="luckyPL" label="中奖人" width="100"></el-table-column>
                    <el-table-column property="name" label="奖品" width="100"></el-table-column>
                    <el-table-column property="type" label="类型" width="50"></el-table-column>
                    <el-table-column property="level" label="等级" width="50"></el-table-column>
                    <el-table-column property="use" label="消耗或发动条件" width="120"></el-table-column>
                    <el-table-column property="area" label="作用对象" width="80"></el-table-column>
                    <el-table-column property="desc" label="效果"></el-table-column>
                    <el-table-column property="other" label="其他"></el-table-column>
                </el-table>
            </div>
         
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="showTotal = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>


</body>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    //抽奖活动名 （每次抽奖活动编辑一定要修改这个字段！可以清空之前玩家的抽奖记录！）
    var dateName = "圣诞大抽奖"
    //奖品列表（注意 奖品id对应奖品名 奖品描述）
    var awardList = [
        { id: 1, name: '祈祷术', type: '特殊技能', level: '未知', use: '无', area: '单人', desc: '（要求精神10以上）根据主神等级回蓝，0级主神无法回蓝，1级每回合全体回蓝(1d2)-1点', other: '不可出售' },
        { id: 2, name: '未知的树枝', type: '道具', level: '1', use: '无', area: '单人', desc: '持有它感觉神清气爽，或许可以用来打造什么', other: '可出售' },
        { id: 3, name: '船票', type: '道具', level: '3', use: '一次性物品', area: '单人', desc: '一张不知道通往哪里的船票', other: '' },
        { id: 19, name: '神秘的头饰', type: '特殊道具', level: '未知', use: '无', area: '单人', desc: '做工精美，看起来非常新但是造型样式极为古朴', other: '' },
        { id: 4, name: '初级洗涤药剂', type: '道具', level: '1', use: '一次性物品', area: '单人', desc: '扣除2点指定属性，随机增加除该属性外的其他一点属性', other: '可以到拍卖场/黑市出售，初级物品无法进行晶石交易' },
        { id: 5, name: '初级圣水', type: '道具', level: '1', use: '一次性物品', area: '单人', desc: '随机增加1点属性（不包含幸运）', other: '不可出售' },
        { id: 6, name: '未知的树叶', type: '道具', level: '1', use: '无', area: '单人', desc: '持有它感觉神清气爽', other: '可出售' },
        { id: 7, name: '初级附魔药水', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '为你的装备附魔，随机1-2点属性', other: '可以到拍卖场/黑市出售，初级物品无法进行晶石交易' },
        { id: 8, name: '火苗术', type: '技能', level: '1', use: '耗蓝', area: '单人', desc: '火球术的学徒版本，隔壁大卫学会之后他母亲笑开了花', other: '不可出售' },
        { id: 9, name: '聚水术', type: '技能', level: '1', use: '耗蓝', area: '单人', desc: '水箭的学徒版本，隔壁大卫学会之后他母亲笑开了花', other: '不可出售' },
        { id: 10, name: '唤风术', type: '技能', level: '1', use: '耗蓝', area: '单人', desc: '风刃的学徒版本，隔壁玛丽学会后被她父亲胖揍了一顿', other: '不可出售' },
        { id: 11, name: '聚土术', type: '技能', level: '1', use: '耗蓝', area: '单人', desc: '石墙的学徒版本，只能隆起一个小土包而已', other: '不可出售' },
        { id: 12, name: '静电术', type: '技能', level: '1', use: '耗蓝', area: '单人', desc: '闪电球的学徒版本，隔壁丹妮学会后，附近的爷爷奶奶都特别爱来拜访她', other: '不可出售' },
        { id: 13, name: '催生术', type: '技能', level: '1', use: '耗蓝', area: '单人', desc: '生长术的学徒版本，隔壁乔尔学会后，他家收成好了不少', other: '不可出售' },
        { id: 14, name: '圣光祈祷术（初级）', type: '技能', level: '2', use: '耗蓝', area: '单人', desc: '（要求智力10以上）回蓝(1d4)-1', other: '不可出售' },
        { id: 15, name: '圣光治愈术（初级）', type: '技能', level: '2', use: '耗蓝', area: '单人', desc: '（要求智力10以上）回血(1d4)-1', other: '不可出售' },
        { id: 16, name: '未知的树叶', type: '道具', level: '1', use: '无', area: '单人', desc: '持有它感觉神清气爽', other: '可出售' },
        { id: 17, name: '初级洗涤药剂', type: '道具', level: '1', use: '一次性物品', area: '单人', desc: '扣除2点指定属性，随机增加除该属性外的其他一点属性', other: '可以到拍卖场/黑市出售，初级物品无法进行晶石交易' },
        { id: 18, name: '初级圣水', type: '道具', level: '1', use: '一次性物品', area: '单人', desc: '随机增加1点属性（不包含幸运）', other: '不可出售' },
        { id: 20, name: '初级附魔药水', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '为你的装备附魔，随机1-2点属性', other: '可以到拍卖场/黑市出售，初级物品无法进行晶石交易' },
        { id: 21, name: '火苗术', type: '技能', level: '1', use: '耗蓝', area: '单人', desc: '火球术的学徒版本，隔壁大卫学会之后他母亲笑开了花', other: '不可出售' },
        { id: 22, name: '聚水术', type: '技能', level: '1', use: '耗蓝', area: '单人', desc: '水箭的学徒版本，隔壁大卫学会之后他母亲笑开了花', other: '不可出售' },
        { id: 24, name: '唤风术', type: '技能', level: '1', use: '耗蓝', area: '单人', desc: '风刃的学徒版本，隔壁玛丽学会后被她父亲胖揍了一顿', other: '不可出售' },
        { id: 25, name: '聚土术', type: '技能', level: '1', use: '耗蓝', area: '单人', desc: '石墙的学徒版本，只能隆起一个小土包而已', other: '不可出售' },
        { id: 26, name: '静电术', type: '技能', level: '1', use: '耗蓝', area: '单人', desc: '闪电球的学徒版本，隔壁丹妮学会后，附近的爷爷奶奶都特别爱来拜访她', other: '不可出售' },
        { id: 27, name: '催生术', type: '技能', level: '1', use: '耗蓝', area: '单人', desc: '生长术的学徒版本，隔壁乔尔学会后，他家收成好了不少', other: '不可出售' },
        { id: 28, name: '圣光祈祷术（初级）', type: '技能', level: '2', use: '耗蓝', area: '单人', desc: '（要求智力10以上）回蓝(1d4)-1', other: '不可出售' },
        { id: 29, name: '圣光护盾（初级）', type: '技能', level: '2', use: '耗蓝', area: '单人', desc: '（要求智力10以上）附加圣光护盾（护盾+(1d4)-1', other: '不可出售' },
        { id: 30, name: '平底锅', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '经常看见妇女持有这个东西满街找人呢~', other: '可出售' },
        { id: 31, name: '菜刀', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '主妇一般不会拿着她满大街找人的。', other: '可出售' },
        { id: 32, name: '匕首', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '有点锋利的匕首，隔壁珍妮阿姨用它来削苹果。', other: '可出售' },
        { id: 33, name: '圆木盾', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '村里的猎户都是用它防身的。', other: '可出售' },
        { id: 34, name: '平平无奇的项链', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '可能是心理作用，你带着它感觉自己更漂亮了一点。', other: '可出售' },
        { id: 35, name: '布鞋', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '这个做工可能比布鞋更方便行走。', other: '可出售' },
        { id: 36, name: '粗布护膝', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '这个防护能力聊胜于无', other: '可出售' },
        { id: 37, name: '发卡', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '可能是心理作用，你带着它感觉自己更漂亮了一点。', other: '可出售' },
        { id: 38, name: '鸽子', type: '宠物', level: '1', use: '无', area: '单人', desc: '它很听话，实在饿了你可以杀了炖汤', other: '可出售' },
        { id: 39, name: '猫', type: '宠物', level: '1', use: '无', area: '单人', desc: '你祈祷的品种，撸猫真的很快乐。', other: '可出售' },
        { id: 40, name: '蛇', type: '宠物', level: '1', use: '无', area: '单人', desc: '虽然人畜无害，但是一般人见到它还是想要先杀死。', other: '可出售' },
        { id: 41, name: '兔子', type: '宠物', level: '1', use: '无', area: '单人', desc: '备用口粮，肉风干非常可口', other: '可出售' },
        { id: 42, name: '平底锅', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '经常看见妇女持有这个东西满街找人呢~', other: '可出售' },
        { id: 43, name: '菜刀', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '主妇一般不会拿着她满大街找人的。', other: '可出售' },
        { id: 44, name: '匕首', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '有点锋利的匕首，隔壁珍妮阿姨用它来削苹果。', other: '可出售' },
        { id: 45, name: '圆木盾', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '村里的猎户都是用它防身的。', other: '可出售' },
        { id: 46, name: '平平无奇的项链', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '可能是心理作用，你带着它感觉自己更漂亮了一点。', other: '可出售' },
        { id: 47, name: '布鞋', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '这个做工可能比布鞋更方便行走。', other: '可出售' },
        { id: 48, name: '粗布护膝', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '这个防护能力聊胜于无', other: '可出售' },
        { id: 49, name: '发卡', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '可能是心理作用，你带着它感觉自己更漂亮了一点。', other: '可出售' },
        { id: 50, name: '鸽子', type: '宠物', level: '1', use: '无', area: '单人', desc: '它很听话，实在饿了你可以杀了炖汤', other: '可出售' },
        { id: 51, name: '袋鼠', type: '宠物', level: '1', use: '无', area: '单人', desc: '稀有的宠物，它可以战斗回合帮你打架，当然如果死了就真的死了哦。', other: '可出售' },
        { id: 52, name: '蛇', type: '宠物', level: '1', use: '无', area: '单人', desc: '虽然人畜无害，但是一般人见到它还是想要先杀死。', other: '可出售' },
        { id: 53, name: '松鼠', type: '宠物', level: '1', use: '无', area: '单人', desc: '大尾巴毛茸茸的，可以做围脖', other: '可出售' },
        { id: 54, name: '平底锅', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '经常看见妇女持有这个东西满街找人呢~', other: '可出售' },
        { id: 55, name: '铲子', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '掘地用的，主干道上使用它会被罚款的。', other: '可出售' },
        { id: 56, name: '匕首', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '有点锋利的匕首，隔壁珍妮阿姨用它来削苹果。', other: '可出售' },
        { id: 57, name: '圆木盾', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '村里的猎户都是用它防身的。', other: '可出售' },
        { id: 58, name: '平平无奇的项链', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '可能是心理作用，你带着它感觉自己更漂亮了一点。', other: '可出售' },
        { id: 59, name: '布鞋', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '这个做工可能比布鞋更方便行走。', other: '可出售' },
        { id: 60, name: '粗布护膝', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '这个防护能力聊胜于无', other: '可出售' },
        { id: 61, name: '发卡', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '可能是心理作用，你带着它感觉自己更漂亮了一点。', other: '可出售' },
        { id: 62, name: '鸽子', type: '宠物', level: '1', use: '无', area: '单人', desc: '它很听话，实在饿了你可以杀了炖汤', other: '可出售' },
        { id: 63, name: '猫', type: '宠物', level: '1', use: '无', area: '单人', desc: '你祈祷的品种，撸猫真的很快乐。', other: '可出售' },
        { id: 64, name: '蛇', type: '宠物', level: '1', use: '无', area: '单人', desc: '虽然人畜无害，但是一般人见到它还是想要先杀死。', other: '可出售' },
        { id: 65, name: '兔子', type: '宠物', level: '1', use: '无', area: '单人', desc: '备用口粮，肉风干非常可口', other: '可出售' },
        { id: 66, name: '平底锅', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '经常看见妇女持有这个东西满街找人呢~', other: '可出售' },
        { id: 67, name: '菜刀', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '主妇一般不会拿着她满大街找人的。', other: '可出售' },
        { id: 68, name: '脸盆', type: '特殊道具', level: '1', use: '', area: '单人', desc: '特殊木头材质，不会漏水，长期用它洗脸甚至可以美容（每天洗脸一次，满10次魅力+1）', other: '可出售' },
        { id: 69, name: '圆木盾', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '村里的猎户都是用它防身的。', other: '可出售' },
        { id: 70, name: '平平无奇的项链', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '可能是心理作用，你带着它感觉自己更漂亮了一点。', other: '可出售' },
        { id: 71, name: '布鞋', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '这个做工可能比布鞋更方便行走。', other: '可出售' },
        { id: 72, name: '粗布护膝', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '这个防护能力聊胜于无', other: '可出售' },
        { id: 73, name: '发卡', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '可能是心理作用，你带着它感觉自己更漂亮了一点。', other: '可出售' },
        { id: 74, name: '鸽子', type: '宠物', level: '1', use: '无', area: '单人', desc: '它很听话，实在饿了你可以杀了炖汤', other: '可出售' },
        { id: 75, name: '猫', type: '宠物', level: '1', use: '无', area: '单人', desc: '你祈祷的品种，撸猫真的很快乐。', other: '可出售' },
        { id: 76, name: '蜥蜴', type: '宠物', level: '1', use: '无', area: '单人', desc: '身体很小可以藏在衣服里面，请注意捉虫子喂养它，否则会离家出走', other: '可出售' },
        { id: 77, name: '兔子', type: '宠物', level: '1', use: '无', area: '单人', desc: '备用口粮，肉风干非常可口', other: '可出售' },
    ]
    //奖品展示列表
    var show_awardList = [
        { id: 1, name: '初级洗涤药剂', type: '道具', level: '1', use: '一次性物品', area: '单人', desc: '扣除2点指定属性，随机增加除该属性外的其他一点属性', other: '可以到拍卖场/黑市出售，初级物品无法进行晶石交易' },
        { id: 2, name: '初级圣水', type: '道具', level: '1', use: '一次性物品', area: '单人', desc: '随机增加1点属性（不包含幸运）', other: '不可出售' },
        { id: 3, name: '船票', type: '道具', level: '3', use: '消耗耐久', area: '单人', desc: '一张不知道通往哪里的船票', other: '' },
        { id: 4, name: '平底锅', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '经常看见妇女持有这个东西满街找人呢~', other: '可出售' },
        { id: 5, name: '菜刀', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '主妇一般不会拿着她满大街找人的。', other: '可出售' },
        { id: 6, name: '初级附魔药水', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '为你的装备附魔，随机1-2点属性', other: '可以到拍卖场/黑市出售，初级物品无法进行晶石交易' },
        { id: 7, name: '火苗术', type: '技能', level: '1', use: '耗蓝', area: '单人', desc: '火球术的学徒版本，隔壁大卫学会之后他母亲笑开了花', other: '不可出售' },
        { id: 8, name: '聚水术', type: '技能', level: '1', use: '耗蓝', area: '单人', desc: '水箭的学徒版本，隔壁大卫学会之后他母亲笑开了花', other: '不可出售' },
        { id: 9, name: '唤风术', type: '技能', level: '1', use: '耗蓝', area: '单人', desc: '风刃的学徒版本，隔壁玛丽学会后被她父亲胖揍了一顿', other: '不可出售' },
        { id: 10, name: '聚土术', type: '技能', level: '1', use: '耗蓝', area: '单人', desc: '石墙的学徒版本，只能隆起一个小土包而已', other: '不可出售' },
        { id: 11, name: '静电术', type: '技能', level: '1', use: '耗蓝', area: '单人', desc: '闪电球的学徒版本，隔壁丹妮学会后，附近的爷爷奶奶都特别爱来拜访她', other: '不可出售' },
        { id: 12, name: '催生术', type: '技能', level: '1', use: '耗蓝', area: '单人', desc: '生长术的学徒版本，隔壁乔尔学会后，他家收成好了不少', other: '不可出售' },
    ]
     //往期开奖结果统计列表
     /*
        数据格式（就是每次开奖结果记录） （...的意思是后面可以跟上同格式的多条数据）
         {
            date:'开奖时间',
            dateName:'抽奖活动名',
            awardData:[  （这个是中奖结果数据）
                {
                    teamName:'队伍名称',
                    list:[
                    { luckyPL:'中奖玩家',id: 编号,name: '能力名称', type: '类型', level: '等级', use: '消耗或发动条件', area: '作用对象', desc: '效果', other: '其他待扩充 可以空着不会显示的' },
                    ...
                    ]
                },
                ...
            ]

         },

     */
     var total_historyList = [
         {
            date:'2020-12-25',
            dateName:'圣诞节抽奖',
            awardData:[
                    { luckyPL:'蕾塞',id: 53,name: '兔子', type: '宠物', level: '1', use: '无', area: '单人', desc: '备用口粮，肉风干非常可口', other: '可出售'},
                    { luckyPL:'陆甲',id: 76, name: '蛇', type: '宠物', level: '1', use: '无', area: '单人', desc: '虽然人畜无害，但是一般人见到它还是想要先杀死。', other: '可出售' },
                    { luckyPL:'花上佳途',id: 68, name: '匕首', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '有点锋利的匕首，隔壁珍妮阿姨用它来削苹果。', other: '可出售' },
                    { luckyPL:'依默托尔',id: 29, name: '圣光治愈术（初级）', type: '技能', level: '2', use: '耗蓝', area: '单人', desc: '（要求智力10以上）回血(1d4)-1', other: '不可出售' },
                    { luckyPL:'笑谈',id: 51, name: '猫', type: '宠物', level: '1', use: '无', area: '单人', desc: '你祈祷的品种，撸猫真的很快乐。', other: '可出售' },
                    { luckyPL:'阿斯托尔福',id: 55, name: '菜刀', type: '道具', level: '1', use: '消耗耐久', area: '单人', desc: '主妇一般不会拿着她满大街找人的。', other: '可出售' },
            ]
         },
    ]

    //抽奖规则 （本来想弄成富文本格式的，但是主神还要用富文本编辑器复制代码过来 所以先用字符串，有需要可以我来编辑内容（主神也可以自己学学写html代码XD））
    var ruleTXT = "点抽奖，抽，看记录截图，有时间戳 抽中同一个，时间早的拿到，另一个重抽，完"


    var app = new Vue({
        el: '#app',
        data: {
            showrule: false,
            showaward: false,
            showhistory: false,
            showTotal:false,
            awardData: show_awardList,
            totalHistory:total_historyList,
            ruleTXT: ruleTXT,
            getAwardData: [],
            awardList:awardList,
            dateName:dateName

        },
        created:function(){  
            this.loadData()
        },
        onLoad:function(){
            
        },
        methods: {
            loadData() {
                
                if(JSON.parse(localStorage.getItem('dateName')) == this.dateName){
                    localStorage.setItem('dateName',JSON.stringify(this.dateName))
                    this.getAwardData = JSON.parse(localStorage.getItem('getAwardData')) || []
                }else{
                    localStorage.removeItem('getAwardData')
                    this.getAwardData = []
                    localStorage.setItem('dateName',JSON.stringify(this.dateName))
                    this.loadData()
                }                
            },
            show(id) {
                if (id == 1) {
                    this.showrule = true
                } else if (id == 2) {
                    this.showaward = true
                }else if (id == 3) {
                    this.showhistory = true
                }else if (id == 4) {
                    this.showTotal = true
                }else if (id == 5) {
                    this.$confirm('你不知道')
                }else if (id == 6) {
                    this.showBattle = true
                }

            },
            handleClose(done) {
                this.showrule = false
                this.showaward = false
                this.showhistory = false
                this.showTotal = false
            },
            getPresent() {
                let reset = false
                let present = {}
                let present_id = randomNum(1, this.awardList.length)
                if(this.getAwardData.length>0){
                    this.getAwardData.forEach((item,index) => {
                    if(item.id == present_id){
                        reset = true
                    }
                });
                }
                
                if(reset){
                    if(this.getAwardData.length<this.awardList.length){
                        this.getPresent();
                    }else{
                        this.$confirm('还抽！抽到底儿了还抽！抽你哦！')
                    }
                   
                }else{
                    this.awardList.forEach((item,index) => {
                    if(item.id == present_id){
                        let time = parseInt(new Date().getTime() / 1000);
                        item.time = time
                        item.p_index = index
                        item.date = timestampToTime(time)
                        this.getAwardData.push(item)
                        localStorage.setItem('getAwardData',JSON.stringify(this.getAwardData))
                    }
                });
                   
                }
            }
        }


    })
    //生成从minNum到maxNum的随机数
    function randomNum(minNum, maxNum) {
        switch (arguments.length) {
            case 1:
                return parseInt(Math.random() * minNum + 1, 10);
                break;
            case 2:
                return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
                //或者 Math.floor(Math.random()*( maxNum - minNum + 1 ) + minNum );
                break;
            default:
                return 0;
                break;
        }
    } 
    function timestampToTime(timestamp) {
	    var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
	    var Y = date.getFullYear() + '-';
	    var M = (date.getMonth()+1 < 10 ? '0' + (date.getMonth()+ 1) : date.getMonth() + 1) + '-';
	    var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
	    var h = (date.getHours() < 10 ? '0' + (date.getHours() ) : date.getHours() ) + ':';
	    var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
	    var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
	    return Y + M + D + h + m + s;
	}
</script>
<script>
    var canvas,
        ctx,
        width,
        height,
        size,
        lines,
        tick;
    
    function line() {
        this.path = [];
        this.speed = rand(10, 20);
        this.count = randInt(10, 30);
        this.x = width / 2, +1;
        this.y = height / 2 + 1;
        this.target = {
            x: width / 2,
            y: height / 2
        };
        this.dist = 0;
        this.angle = 0;
        this.hue = tick / 5;
        this.life = 1;
        this.updateAngle();
        this.updateDist();
    }
    
    line.prototype.step = function(i) {
        this.x += Math.cos(this.angle) * this.speed;
        this.y += Math.sin(this.angle) * this.speed;
    
        this.updateDist();
    
        if (this.dist < this.speed) {
            this.x = this.target.x;
            this.y = this.target.y;
            this.changeTarget();
        }
    
        this.path.push({
            x: this.x,
            y: this.y
        });
        if (this.path.length > this.count) {
            this.path.shift();
        }
    
        this.life -= 0.001;
    
        if (this.life <= 0) {
            this.path = null;
            lines.splice(i, 1);
        }
    };
    
    line.prototype.updateDist = function() {
        var dx = this.target.x - this.x,
            dy = this.target.y - this.y;
        this.dist = Math.sqrt(dx * dx + dy * dy);
    }
    
    line.prototype.updateAngle = function() {
        var dx = this.target.x - this.x,
            dy = this.target.y - this.y;
        this.angle = Math.atan2(dy, dx);
    }
    
    line.prototype.changeTarget = function() {
        var randStart = randInt(0, 3);
        switch (randStart) {
            case 0: // up
                this.target.y = this.y - size;
                break;
            case 1: // right
                this.target.x = this.x + size;
                break;
            case 2: // down
                this.target.y = this.y + size;
                break;
            case 3: // left
                this.target.x = this.x - size;
        }
        this.updateAngle();
    };
    
    line.prototype.draw = function(i) {
        ctx.beginPath();
        var rando = rand(0, 10);
        for (var j = 0, length = this.path.length; j < length; j++) {
            ctx[(j === 0) ? 'moveTo' : 'lineTo'](this.path[j].x + rand(-rando, rando), this.path[j].y + rand(-rando, rando));
        }
        ctx.strokeStyle = 'hsla(' + rand(this.hue, this.hue + 30) + ', 80%, 55%, ' + (this.life / 3) + ')';
        ctx.lineWidth = rand(0.1, 2);
        ctx.stroke();
    };
    
    function rand(min, max) {
        return Math.random() * (max - min) + min;
    }
    
    function randInt(min, max) {
        return Math.floor(min + Math.random() * (max - min + 1));
    };
    
    function init() {
        canvas = document.getElementById('canvas');
        ctx = canvas.getContext('2d');
        size = 30;
        lines = [];
        reset();
        loop();
    }
    
    function reset() {
        width = Math.ceil(window.innerWidth / 2) * 2;
        height = Math.ceil(window.innerHeight / 2) * 2;
        tick = 0;
    
        lines.length = 0;
        canvas.width = width;
        canvas.height = height;
    }
    
    function create() {
        if (tick % 10 === 0) {
            lines.push(new line());
        }
    }
    
    function step() {
        var i = lines.length;
        while (i--) {
            lines[i].step(i);
        }
    }
    
    function clear() {
        ctx.globalCompositeOperation = 'destination-out';
        ctx.fillStyle = 'hsla(0, 0%, 0%, 0.1';
        ctx.fillRect(0, 0, width, height);
        ctx.globalCompositeOperation = 'lighter';
    }
    
    function draw() {
        ctx.save();
        ctx.translate(width / 2, height / 2);
        ctx.rotate(tick * 0.001);
        var scale = 0.8 + Math.cos(tick * 0.02) * 0.2;
        ctx.scale(scale, scale);
        ctx.translate(-width / 2, -height / 2);
        var i = lines.length;
        while (i--) {
            lines[i].draw(i);
        }
        ctx.restore();
    }
    
    function loop() {
        requestAnimationFrame(loop);
        create();
        step();
        clear();
        draw();
        tick++;
    }
    
    function onresize() {
        reset();
    }
    
    // window.addEventListener('resize', onresize);
    
    // init();
    
    </script>
</html>